<template>
  <div>
    <div>
      <img
        src="https://yanxuan.nosdn.127.net/static-union/164793255107785e.png"
        alt=""
      />

      <div class="ip">
        <div class="sjh">
          <input type="text" placeholder="邮箱账号" v-model="yxid" />
        </div>
        <div class="yzm">
          <input type="text" placeholder="密码" v-model="yxpwd" />
        </div>
        <div class="dl">
          <button @click="yxyz">注册</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
let service = axios.create();
export default {
  data() {
    return {
      yxid: "",
      yxpwd: "",
    };
  },
  methods: {
    yxyz() {
      let reg = /^\d{9,10}@qq.com$/;
      if (reg.test(this.yxid)) {
        service({
          url: "http://118.178.238.19:3001/api/user/dofinishregister",
          method: "post",
          data: {
            tel: this.yxid,
            password: this.yxpwd,
          },
        }).then((res) => {
          sessionStorage.setItem("id", this.yxid);
          sessionStorage.setItem("pwd", this.yxpwd);

          alert(`${res.data.message} '可以登录啦'`);
          console.log(this.yxid, this.yxpwd);
          this.$router.push("/emitlogin");
          console.log(res);
        });
      } else {
        alert("请输入正确的邮箱");
      }
    },
  },
};
</script>

<style scoped>
img {
  width: 8.375rem;
  height: 2.8125rem;
  position: absolute;
  top: 6.125rem;
  left: 7.125rem;
}

input {
  width: 13.75rem;
  border: none;
  height: 2.125rem;
}
.ip {
  display: flex;
  height: 7.5rem;
  flex-direction: column;
  justify-content: space-between;
  position: absolute;
  top: 10.25rem;
  left: 1.25rem;
}
.sjh {
  border-bottom: 1px solid #999;
  height: 3.75rem;
  line-height: 3.75rem;
  width: 20rem;
}
.yzm {
  border-bottom: 1px solid #999;
  height: 3.75rem;
  line-height: 3.75rem;
  width: 20rem;
}
.dl button {
  width: 20rem;
  height: 2.5rem;
  text-align: center;
  color: #fff;
  background: #dd1a21;
  border: none;
}
</style>